<x-row>
  <x-col span="24">
    <table>
      <tr>
        <th width="100">Name</th>
        <th width="250">Style</th>
        <th>Display</th>
      </tr>
      <tr>
        <td>no radius</td>
        <td>border-radius: 0;</td>
        <td>
          <div></div>
        </td>
      </tr>
      <tr>
        <td>small radius</td>
        <td>border-radius: 0.125rem;</td>
        <td>
          <div [style.border-radius.rem]="0.125"></div>
        </td>
      </tr>
      <tr>
        <td>large radius</td>
        <td>border-radius: 0.25rem;</td>
        <td>
          <div [style.border-radius.rem]="0.25"></div>
        </td>
      </tr>
      <tr>
        <td>round radius</td>
        <td>border-radius: 1.5rem;</td>
        <td>
          <div [style.border-radius.rem]="1.5"></div>
        </td>
      </tr>
    </table>
  </x-col>
</x-row>
